import styled from "styled-components"

const MyifoWrap = styled.div`
      background-color:#f1f4f8;
      >div{
        height:1.75rem;
        display:flex;
        justify-content:center;
        >div{
        width:94%;
        background-color:#2b98fd;
        border-radius:0.04rem;
        height:1.75rem;
        .shang{
          
          height:.87rem;
          color:#fff;
          display:flex;
          justify-content:space-between;
          padding:.11rem .09rem .11rem 0.06rem;
          .xuz{
            height:.76rem;
            width:.54rem;
            >img{
              height:.76rem;
            }
          }
          .touxiang{
            display:flex;
            align-items:center;
             >div{
              padding-left:.12rem;
              font-size:.17rem;
              p{
                font-size:.09rem;
              }
             }
             .imgs{
              border-radius:.255rem;
              height:.51rem;
              width:.51rem;
              background-color:#ccc;
              position: relative;
              >img{
                border-radius:.255rem;
                position: absolute;
                left:0rem;
                height:.51rem;

              }
             }
          }
        }
        .dengji{
          display:flex;
          color:#fff;
          width:100%;
          padding-top:.36rem;
          justify-content:space-between;
          .bar{
            width:70%;
            padding-left:.07rem;
            >div{
              height:.03rem;
              background-color:#89bfff;
              margin-bottom:.13rem;
            }
          }
          >div{
            padding-right:.21rem;
            font-size:.11rem;

          }
        }
      }
      }
      ul{
        display:flex;
        padding:.4rem .23rem 0 .23rem;
        justify-content:space-around;
        li{
          width:25%;
          >div{
            display:flex;
            flex-direction:column;
            align-items:center;
            >div{
              >img{
              height:.235rem;
              width:.235rem;
            }
            }
            >span{
             padding:.19rem 0;
             font-size:.14rem;           
              }
          }       
           }
      }
`
const MyStyudyWrap = styled.div`
      margin-top:.1rem;
      height:2.95rem;
      background-color:#f1f4f8;
      >div{
          padding-top:.2rem;
        >h1{
          font-size:.14rem;
          padding-left:.11rem;
        }
        >div{
           ul{
             margin:.2rem 0 .2rem 0;
             justify-content:space-around;
             display:flex;
             flex-wrap:wrap;
             li{
             width:42%;
             border-radius:.04rem;
             background-color:#fff;
             margin-bottom:.2rem;
             padding-right:.13rem;
             display:flex;
             height: 1rem;
             .ico{
               height:100%;
               padding:0 0 .17rem 0;
               display:flex;
               flex-direction:column-reverse;
               span{
                    padding-left:.3rem;
                  img{
                    width:.38rem;
                  }
               }
             }
             .text{
               padding:.15rem 0 0 .13rem;
              >p{
                color:#666;
                font-size:.115rem;
              }
              >h1{
               color:#333;
               font-size:.13rem;
               padding-bottom:.095rem;
             }
             }
             }
           }
        }
      }

`
const MoreWrap = styled.div`
      padding:.11rem;
      height:2.95rem;
      background-color:#f1f4f8;
      >div{
          padding-top:.2rem;
        >h1{
          font-size:.14rem;
          padding-bottom:.1rem;
        }
        ul{
          background-color:#eceff2;
          li{
            display:flex;
            justify-content:space-between;
            height:.45rem;
            margin-bottom:.015rem; 
            background-color:#f1f4f8;
            >div{
                display:flex;
                >span{
                    padding-left:.045rem;
                    font-size:.13rem;
                }
                >div{ 
                  >img{   
                    height:.17rem;   
                  }
            }
            }
            p{
              >img{
                  height:.14rem;
                }
          }
        }
      }
      }
`
const StyledMine = styled.div`
      background-color:#eceff2
`

export {
  MyifoWrap,
  MyStyudyWrap,
  MoreWrap,
  StyledMine
}